<template>
  	<div>
       <head-top signin-up='home'>
            <span slot='logo' class='head_logo' @click="reload">ele.me</span>
       </head-top>
       <nav class="city_nav">
           <div class="city_tip">
               <span>当前定位城市：</span>
               <span>定位不准时，请在城市列表中选择</span>
           </div>
           <router-link :to="'/city/' + guessCityid" class="guess_city">
                <span>{{guessCity}}</span>
                <svg class="arrow_right">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                </svg>
           </router-link>
       </nav>
       <section id="hot_city_container">
           <h4 class="city_title">热门城市</h4>
           <ul class="citylistul clear">
               <router-link tag="li" v-for="item in hotcity" :to="'/city/' +item.id" :key="item.id">
                    {{item.name}}
               </router-link>
           </ul>
       </section>
       <section class="group_city_container">
           <ul class="letter_classify">
               <li class="letter_classify_li" v-for="(value, key, index) in sortgroupcity" :key="key">
                   <h4 class="city_title">{{key}}
                       <span v-if="index == 0">（按字母排序）</span>
                   </h4>
                   <ul class="groupcity_name_container citylistul clear">
                       <router-link tag="li" v-for="item in value" :to="'/city/' + item.id" :key="item.id" class="ellipsis">
                            {{item.name}}
                       </router-link>
                   </ul>
               </li>
           </ul>
       </section>
    </div>
</template>

<script>
import headTop from '../../components/header/head'
import {cityGuess, hotcity, groupcity} from '../../service/getData'

export default {
    data(){
        return{
          guessCity: '',    //当前城市
          guessCityid: '',  //当前城市id
          hotcity: [],      //热门城市列表
          groupcity: {},    //所有城市列表
        }
    },

	mounted(){
        //获取当前城市
        cityGuess().then(res => {
            // console.log(res.id);
            this.guessCity = res.name;
            this.guessCityid = res.id;
        })

        //获取热门城市
        hotcity().then(res =>{
            //  console.log(res);
            this.hotcity = res;
        })

        //获取所有城市
        groupcity().then(res => {
            //  console.log(res);
            this.groupcity = res;
        })
    },

    components:{
        headTop
    },

    computed:{
      //将获取的数据按照A-Z字母开头排序
      sortgroupcity(){
          let sortobj = {};
          for ( let i=65; i<=90;i++){
              sortobj[String.fromCharCode(i)] = this.groupcity[String.fromCharCode(i)];
          }

          return sortobj;
      }
    },

    methods:{
        //点击图标刷新页面
        reload(){
            window.location.reload();
        }
    },
}

</script>

<style lang="scss" scoped>
    @import '../../style/mixin';
    //
    //@include sc()  字体大小，颜色
    //@include wh()  宽高
    //@include ct    定位上下居中
    //@include cl    定位左右居中
    //@include center定位上下左右居中
    //@include bis($url) 背景图片地址和大小
    //@include allcover   定位全屏
    //@include  font  字体大小、行高、字体
    //@include  fj   flex布局和子元素对齐方式
    .head_logo {
        left: 0.4rem;
        font-weight: 400;
        @include sc(0.7rem, #fff);
        @include wh(2.3rem, 0.7rem);
        @include ct;
    }
    .city_nav {
        padding-top: 2.35rem;
        border-top: 1px solid $bc;
        background-color: #fff;
        margin-bottom: 0.4rem;
        .city_tip {
            @include fj;
            line-height: 1.45rem;
            padding: 0 0.45rem;
            span:nth-of-type(1){
                @include sc(0.55rem, #666);
            }
            span:nth-of-type(2){
                font-weight: 900;
                @include sc(0.475rem, #9f9f9f);
            }
        }
        .guess_city {
            @include fj;
            align-items: center;
            height: 1.8rem;
            padding: 0 0.45rem;
            border-top: 1px solid $bc;
            border-bottom: 2px solid $bc;
            @include font(0.75rem, 1.8rem);
            span:nth-of-type(1){
                color: $blue;
            }
            .arrow_right {
                @include wh(0.6rem, 0.6rem);
                fill: #999;
            }
        }
    }

    #hot_city_container {
        background-color: #fff;
        margin-bottom: 0.4rem;
    }

    .citylistul {
        li {
            float: left;
            text-align: center;
            color: $blue;
            border-bottom: 0.025rem solid $bc;
            border-right: 0.025rem solid $bc;
            @include wh(25%, 1.75rem);
            @include font(0.6rem, 1.75rem);
        }
        li:nth-of-type(4n) {
            border-right: none;
        }
    }

    .city_title {
        color: #666;
        font-weight: 400;
        text-indent: 0.45rem;
        border-top: 2px solid $bc;
        border-bottom: 1px solid $bc;
        @include font(0.55rem, 1.45rem, "Helvetica Neue");
        span {
            @include sc(0.475rem, #999);
        }
    }
    .letter_classify_li {
        margin-bottom: 0.4rem;
        background-color: #fff;
        border-botom: 1px solid $bc;
        .groupcity_name_container {
            li {
                color: #666;
            }
        }
    }
</style>
